<template>
    <div class="addContract">
        <div>
            <van-cell-group style="text-align:left">
                <van-field
                    label-class='fw'
                    name="报告类别"
                    v-model="form.fr_reporttypename"
                    label="报告类别:"
                    @click="showFdeptClick"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.报告类别')"
                    :error-message="errors.first('registerForm.报告类别')"
                    required
                    readonly
                    is-link
                    placeholder="请选择报告类别">
                </van-field>
                <van-popup 
                    v-model="showFdept" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择检验类别' 
                        :columns="columns"
                        show-toolbar
                        value-key='text'
                        @cancel="onCancel4fdeptname"
                        @confirm="onConfirm4fdeptname"
                     />
                </van-popup>

                <van-field
                    label-class='fw'
                    name="提交报告方式"
                    v-model="form.fr_sendtypename"
                    label="提交报告方式:"
                    @click="showReporttypeClick"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.提交报告方式')"
                    :error-message="errors.first('registerForm.提交报告方式')"
                    required
                    readonly
                    is-link
                    placeholder="请选择提交报告方式">
                </van-field>
                <van-popup 
                    v-model="showReporttype" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择提交报告方式' 
                        :columns="columnsReportType"
                        show-toolbar
                        value-key='text'
                        @cancel="onCancel4Reporttype"
                        @confirm="onConfirm4Reporttype"
                     />
                </van-popup>

                 <van-field 
                    label-class='fw' 
                    v-model="form.fr_mailbox" 
                    placeholder="请输入邮箱"
                    label="邮箱:" 
                    required
                    name="邮箱"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.邮箱')"
                    :error-message="errors.first('registerForm.邮箱')"
                />
                <van-field 
                    label-class='fw' 
                    v-model="form.fr_mailingadd" 
                    placeholder="请输入邮寄地址"
                    label="邮寄地址:" 
                    required
                    name="邮寄地址"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.邮寄地址')"
                    :error-message="errors.first('registerForm.邮寄地址')"
                />
                <van-field 
                    label-class='fw' 
                    v-model="form.fr_recipients" 
                    placeholder="请输入收件人"
                    label="收件人:" 
                    required
                    name="收件人"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.收件人')"
                    :error-message="errors.first('registerForm.收件人')"
                />
                <van-field 
                    label-class='fw' 
                    v-model="form.fr_phone" 
                    label="收件人电话:" 
                     placeholder="请输入收件人电话"
                    required
                    type="tel"
                    name="收件人电话"
                    v-validate="'required'"
                    data-vv-scope="registerForm"
                    :error="errors.has('registerForm.收件人电话')"
                    :error-message="errors.first('registerForm.收件人电话')"
                />
                <van-cell title-class='fw'  placeholder="请选择报告时间" is-link title="提供报告时间:" :value="form.fr_senddate" @click="showTimeClick"/>
                <van-popup v-model="showTime" get-container="body" position='bottom'>
                    <van-datetime-picker
                        v-model="currentDate"
                        type="date"
                        :formatter="formatter"
                        @confirm='timeConfirm'
                        @cancel='timecancel'
                    />
                </van-popup>

                <van-field
                    label-class='fw'
                    v-model="form.fr_reportstylename"
                    label="报告格式:"
                    @click="showReportStyleClick"
                    readonly
                    is-link
                    placeholder="请选择报告格式">
                </van-field>
                <van-popup 
                    v-model="showReportStyle" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择报告格式' 
                        :columns="columnsReportStyle"
                        show-toolbar
                        value-key='text'
                        @cancel="onCancel4ReportStyle"
                        @confirm="onConfirm4ReportStyle"
                     />
                </van-popup>
                <van-field placeholder="请输入报告份数" type="digit" v-model="form.fr_reportnumber" label="报告份数:"  label-class='fw'/>
                <van-field placeholder="请输入任务来源"  v-model="form.fjobsource" label="任务来源:"  label-class='fw'/>
                <van-field placeholder="请输入下派任务单编号" label-width="120px"  v-model="form.fjobnumber" label="下派任务单编号:"  label-class='fw'/>
            </van-cell-group>
        </div>
        <div class='step2Footer' >
            <div class='pre' @click="pre">上一步</div>
            <div class='next' @click="next">下一步</div>
        </div>
    </div>
</template>

<script>
import {
    searchfcode
    ,insertsamplereport
    ,searchbyid
} from '@/api/addSampleBill'
import { 
    Field
    ,DatetimePicker
    , Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Toast
} from 'vant';
export default {
    name: 'addContract',
    components: {
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,

    },
    created(){
        this.state = this.$route.query.state
        if(this.state == 'add'){
            this.getCode()
            //this.searchColumns()
        }else if(this.state == 'edit'){
            this.form.fcontractid = this.$route.query.fsamplereportid
            this.getEdit(this.form.fsamplereportid)
        }else if(this.state == 'view'){
            this.form.fcontractid = this.$route.query.fsamplereportid
            this.getEdit(this.form.fsamplereportid)
        }
    },
    data () {
        return {
            showReporttype:false,
            showReportStyle:false,
            state:'',
            text:'',
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            showTime:false,
            showFdept:false,
            form:{
                fsamplereportid:'',
                fstep:'4',
                fr_reporttypename:'',
                fr_reporttype:'',
                fr_sendtypename:'',
                fr_sendtype:'',
                fr_mailbox:'',
                fr_mailingadd:'',
                fr_recipients:'',
                fr_phone:'',
                fr_senddate:'',
                fr_reportstylename:'',
                fr_reportstyle:'',
                fr_reportnumber:'',
                fjobsource:'',
                fjobnumber:''
            },
            columns: [
                { text: '正式报告',id:'1'},
                { text: '非正式报告',ud:'2' },
            ],
            columnsReportType:[
                { text: '自取',id:'1'},
                { text: '传真（每份5元）',id:'2' }, 
                { text: '挂号邮寄（每份10元）',id:'3' }, 
                { text: '特快专递（每份20元）',id:'4' }, 
            ],
            columnsReportStyle:[
                { text: '检验报告',id:'1'},
                { text: '约定格式',id:'2' }, 
                { text: '其他',id:'3' }, 
            ]
          
        }
    },
    methods:{
        pre(){
            this.$router.push({path:"/addSampleBill3"});
        },
        next(){
            this.$validator.validateAll('registerForm').then((valid) => {
                console.log(valid)
                if (valid) {
                    updatesamplereport(this.form).then(res=>{
                        if(res.isSuccess){
                        }
                    })
                    this.$router.push({path:"/addSampleBill5"});
                }
            })
        },
        showReportStyleClick(){
            this.showReportStyle = true
        },
        onConfirm4ReportStyle(val){
            this.form.fr_reportstylename = val.text
            this.form.fr_reportstyle = val.id
            this.showReportStyle = false
        },

        onCancel4ReportStyle(){
            this.showReportStyle = false
        },
        showReporttypeClick(){
            this.showReporttype = true
        },
        onCancel4Reporttype(){
            this.showReporttype = false
        },
        onConfirm4Reporttype(val){
            this.form.fr_sendtypename = val.text
            this.form.fr_sendtype = val.id
            this.showReporttype = false
        },
        searchColumns(){
            searchforwx().then(res=>{
                if(res.isSuccess){
                    this.columns = res.rows.filter(function(value) {return value.fstate ==1;})
                }
            })
        },
        getEdit(fsamplereportid){
            searchbyid({
                fsamplereportid:fsamplereportid
            }).then(res=>{
                console.log(res)
               
               
            })
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
 
        save(){
            this.$validator.validateAll('registerForm').then((valid) => {
                console.log(valid)
                if (valid) {
                    if(this.state == 'add'){
                        insertsamplereport(this.form).then(res=>{
                            if(res.isSuccess){
                                Toast('保存成功');
                                this.$router.push({path:"/"});
                            }
                        })
                    }else if(this.state == 'edit'){ 
                        edit(this.form).then(res=>{
                            if(res.isSuccess){
                                Toast('修改成功');
                                this.$router.push({path:"/"});
                            }
                        })
                    }
                }
            })

        },
        getCode(){
            searchfcode({}).then(res=>{
                if(res.isSuccess){
                    console.log(res)
                    this.form.fsamplereportcode = res.object
                }
            })
        },
        showTimeClick(){
            this.showTime = true
        },
        timeConfirm(val){
            this.form.fr_senddate = this.dateToString(val)
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },
        showFdeptClick(){
            this.showFdept = true
        },
        onCancel4fdeptname(val){
            this.showFdept = false
        },
        onConfirm4fdeptname(val){
            this.form.fr_reporttypename = val.text
            this.form.fr_reporttype = val.id
            this.showFdept = false
        },
        dateToString(date){ 
            var year = date.getFullYear(); 
            var month =(date.getMonth() + 1).toString(); 
            var day = (date.getDate()).toString();  
            if (month.length == 1) { 
                month = "0" + month; 
            } 
            if (day.length == 1) { 
                day = "0" + day; 
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime; 
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.faddContractFooter{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    height: 40px;
    display: flex;
    flex: 1
}
.leftBtn4addContract{
    line-height: 40px;
    width:100%;
    text-align: center;
    background-color: #07c160;
    color:white;
}
.rightBtn4addContract{
    line-height: 40px;
    width:50%;
    text-align: center;
    background-color: #1989fa;
    color:white;  
}
.fw{
    font-weight: 700
}
.lang{
    width:120px
}
.step2Footer{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    color: white;
    display: flex
}
.pre{
    background: #07c160;
    width: 50%;
}
.next{
    background:  #1989fa;
    width: 50%;
}
</style>
